<template>
  <el-button type="primary" @click="switchView">切换模式</el-button>
  <zl-form ref="formRef" :option="formOption" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FormColumnType, FormOption, ZlForm } from '@zl-crud/components'
import '@zl-crud/components/form/style/index.ts'

const formRef = ref()

const isView = ref(false)
const switchView = () => {
  isView.value = !isView.value
  formRef.value.switchView(isView.value)
}

// 表单配置
const formOption: FormOption = {
  mock: true,
  // formStyle: FormStyle.table,
  // isView: true,
  // mockData: {
  //   id: 1,
  //   name: '测试用户',
  //   email: 'test@example.com',
  //   phone: '13800138000',
  //   gender: 1,
  //   hobbies: '1,2',
  //   birthDate: '1990-01-01',
  //   salary: 10000,
  //   avatar: '',
  //   files: '',
  //   address: '北京市-北京市-东城区 详细信息详细信息详细信息详细信息详细信息详细信息',
  //   description: '这是一段描述信息',
  //   status: 1,
  // },
  mockTemplate: {
    type: '@word(10)',
    code: '@word(10)',
    // startUser: '@word(10)',
    // startDept: '@word(10)',
    details: [
      {
        name: '@word(10)',
        code: '@word(10)',
        spec: '@word(10)',
        model: '@word(10)',
        info: '@word(10)',
        standard: '@word(10)',
        manufacturer: '@word(10)',
        unit: '@word(10)',
        requestNum: '@integer(1, 100)',
      },
    ],
  },

  AvueOption: {
    // tabs: true,
    column: [
      { label: '', titleVal: '产品明细', type: 'title' },
      { label: '订单名称', prop: 'title' },
      { format: 'YYYY-MM-DD HH:mm:ss', label: '签订时间', prop: 'startTime', type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
      { format: 'YYYY-MM-DD HH:mm:ss', label: '交付时间', prop: 'endTime', type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
      { label: '订单类型', prop: 'type', type: 'select', showProp: 'type_value', value: '1' },
      { label: '数量', prop: 'num', type: 'decimal' },
      { label: '供应商', prop: 'suppler', type: FormColumnType.Autocomplete },
      { label: '采购负责人', prop: 'chargeUser', type: 'employee', rules: [{ required: true }] },

      //       { label: '生产单号', prop: 'plmCode', type: FormColumnType.Upload, labelWidth: 100 },
      //       { label: '要求时间', prop: 'requireTime', type: 'datetime', value: formatDate() },
      //       {
      //         label: '申请人',
      //         prop: 'startUser',
      //         type: FormColumnType.SelectPopover,
      //         options: { isMultiple: true, isAvatar: true },
      //         showProp: 'startUser_value',
      //       },
      //       {
      //         label: '申请部门',
      //         prop: 'startDept',
      //         type: FormColumnType.SelectPopover,
      //         options: { isMultiple: true, isAvatar: true, mock: { mock: true, mockTemplate: { label: '@dept', value: '@word(10)' } } },
      //         showProp: 'startDept_value',
      //       },
      //       { label: '申请日期', prop: 'startTime', type: 'date', value: formatDay() },
      //     ],
      //   },
      //   {
      //     label: '物料明细',
      //     arrow: false,
      //     column: [
      {
        prop: 'details',
        type: 'dynamic',
        span: 24,
        children: {
          border: true,
          stripe: true,
          column: [
            { label: '名称', prop: 'name', width: 120, fixed: true },
            { label: '编号', prop: 'code', minWidth: 100, cell: false },
            { label: '规格', prop: 'spec', minWidth: 100, cell: false },
            { label: '型号', prop: 'model', minWidth: 100, cell: false },
            { label: '类别', prop: 'info', minWidth: 100, cell: false },
            { label: '技术标准', prop: 'standard', minWidth: 100, cell: false },
            { label: '制造商', prop: 'manufacturer', minWidth: 100, cell: false },
            { label: '单位', prop: 'unit', width: 60, fixed: 'right', cell: false },
            { label: '申请数量', prop: 'requestNum', width: 80, fixed: 'right' },
          ],
        },
      },
      //       { label: '总数量', prop: 'totalNum' },
      //     ],
      //   },
      // ],
    ],
  },
}
</script>

<style scoped lang="scss"></style>
